<template>
	<view class="page-container">
		<view class="filter-section">
			<view class="price-header">
				<text>价格筛选 (元)</text>
				<!-- 使用 show-value，清晰展示当前选定的最大值 -->
				<text class="price-display">低于: ¥{{ maxPrice }}</text>
			</view>

			<slider
				:value="maxPrice"
				:min="0"
				:max="5000"
				:step="50"
				:disabled="isLoading"
				activeColor="#E53935"
				backgroundColor="#e9e9e9"
				block-color="#FFFFFF"
				:block-size="28"
				show-value
				@changing="handlePriceChanging"
				@change="handlePriceChange"
			/>

			<view v-if="isLoading" class="loading-tip">
				<text>正在加载商品...</text>
			</view>
		</view>

		<view class="product-list">
			<!-- 商品列表展示区域 -->
			<view class="product-item" v-for="item in products" :key="item.id">{{ item.name }} - ¥{{ item.price }}</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			maxPrice: 1000, // 默认最大价格
			isLoading: false, // 是否正在加载数据
			products: [] // 商品列表
		};
	},
	mounted() {
		// 页面加载时获取一次初始商品
		this.fetchProducts();
	},
	methods: {
		// @changing: 拖动时，仅更新UI显示，成本极低
		handlePriceChanging(e) {
			this.maxPrice = e.detail.value;
		},

		// @change: 拖动结束，这是执行业务逻辑的最佳时机
		handlePriceChange(e) {
			this.maxPrice = e.detail.value;
			console.log(`拖动结束，最终价格确定为：${this.maxPrice}，准备请求数据。`);
			this.fetchProducts();
		},

		// 模拟从服务器获取商品数据
		fetchProducts() {
			if (this.isLoading) return; // 如果正在加载，则不执行

			this.isLoading = true; // 开始加载，禁用slider
			this.products = []; // 清空旧数据
			console.log(`发起API请求：获取价格低于 ${this.maxPrice} 的商品...`);

			// 模拟网络请求
			setTimeout(() => {
				// 模拟返回的数据
				this.products = [
					{ id: 1, name: '商品A', price: 199 },
					{ id: 2, name: '商品B', price: 499 },
					{ id: 3, name: '商品C', price: this.maxPrice - 10 }
				].filter((p) => p.price <= this.maxPrice);

				this.isLoading = false; // 加载完成，解除slider的禁用状态
				console.log('商品数据加载完成。');
			}, 1500);
		}
	}
};
</script>

<style>
.page-container {
	padding: 15px;
}
.filter-section {
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 10px 15px;
	margin-bottom: 20px;
}
.price-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}
.price-display {
	font-weight: bold;
	color: #e53935;
}
.loading-tip {
	text-align: center;
	color: #999;
	font-size: 14px;
	margin-top: 10px;
}
.product-list {
	margin-top: 20px;
}
.product-item {
	background-color: #f9f9f9;
	padding: 10px;
	border-radius: 4px;
	margin-bottom: 10px;
}
</style>
